<template>
  <div class="flex">
    <div
      class="relative flex select-none items-center text-left"
      @click="backToPrevFolder"
    >
      <SvgIcon
        v-if="fileStore.curFolderId !== 0"
        name="left-arrow"
        svgClass="mr-2 -ml-1 cursor-pointer align-middle transition-all duration-200 lg:-mt-0.5 feather feather-chevron-left translate-x-0 opacity-100"
      />
      <b
        class="inline-block lg:max-w-[210px] max-w-[190px] transform overflow-hidden text-ellipsis whitespace-nowrap align-middle font-bold transition-all text-base duration-200 dark:text-gray-100"
        >{{ fileStore.curFolderInfo.name }}</b
      >
      <div
        v-if="fileStore.curFolderId !== 0"
        class="mobile:hidden relative ml-3 transform cursor-pointer rounded-md bg-light-background py-0.5 px-1.5 transition-all duration-200 dark:bg-dark-foreground translate-x-0 opacity-100"
      >
        <SvgIcon name="more" />
      </div>
    </div>
    <div
      @click.stop="fileStore.setVisible"
      class="px-1 py-1 bg-[#f4f5f6] rounded-xl cursor-pointer mx-2 flex items-center"
    >
      <SvgIcon :name="fileStore.visible ? 'error' : 'add'" />
    </div>
  </div>
</template>
<script setup>
import { FILE_LIST } from '@/components/fileList/filedsConfig';
import { useFileStore, useFlagStore, useI18nStore } from '@/stores';
const fileStore = useFileStore();
const flagStore = useFlagStore();
const i18nStore = useI18nStore();
const backToPrevFolder = () => {
  if (fileStore.curFolderId === 0) return;
  flagStore.setFileListLoading(true);
  fileStore.backToParentFolder().then(() => {
    flagStore.setFileListLoading(false);
  });
};
</script>
